<script setup>
import { ref } from 'vue'
import { Dialog } from 'vant'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

import {
  getAddressList,
  getAddressDefaultId,
  setAddressDefaultId,
  removeAddress
} from '@/api/address'

const list = ref([])
const defaultId = ref('')

const setDefaultStatus = () => {
  list.value.forEach(
    (item) => (item.isDefualt = item.address_id === defaultId.value)
  )
}

const getAddress = async () => {
  const { data } = await getAddressDefaultId()
  defaultId.value = data.defaultId

  const { data: addressData } = await getAddressList()
  list.value = addressData.list
  setDefaultStatus()
}

const selectAddress = async (addressId) => {
  await setAddressDefaultId({ addressId })
  defaultId.value = addressId
  setDefaultStatus()

  if (route.query.from === 'checkout') {
    router.back()
  }
}

const deleteAddress = (addressId) => {
  Dialog.confirm({
    title: '温馨提示',
    message: '你确定要删除当前收货地址吗？'
  })
    .then(() => {
      removeAddress({ addressId })
      getAddress()
    })
    .catch(() => {})
}

const init = async () => {
  await getAddress()
}
init()
</script>

<template>
  <div class="address">
    <van-nav-bar
      title="收货地址"
      left-arrow
      fixed
      @click-left="$router.back()"
    />
    <div class="list">
      <div class="item" v-for="item in list" :key="item.address_id">
        <div class="info">
          <p>
            <span>{{ item.name }}</span>
            <span>{{ item.phone }}</span>
          </p>
          <p>
            <span>{{ item.region.province }}</span>
            <span>{{ item.region.city }}</span>
            <span>{{ item.region.region }}</span>
            <span>{{ item.region.detail }}</span>
          </p>
        </div>
        <div class="call">
          <p @click="selectAddress(item.address_id)">
            <van-checkbox
              checked-color="#ee0a24"
              icon-size="18px"
              v-model="item.isDefualt"
            ></van-checkbox>
            <span v-if="item.isDefualt">默认</span>
            <span v-else>选择</span>
          </p>
          <p>
            <span
              @click="
                $router.push(`/address/update?addressId=${item.address_id}`)
              "
            >
              <van-icon name="edit" size="14px" />
              <span>编辑</span>
            </span>
            <span @click="deleteAddress(item.address_id)">
              <van-icon name="delete-o" size="14px" />
              <span>删除</span>
            </span>
          </p>
        </div>
      </div>
    </div>

    <!-- 添加按钮 -->
    <div class="footer">
      <button @click="$router.push('/address/create')">添加新地址</button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.address {
  padding-top: 46px;
  padding-bottom: 60px;
}

.van-nav-bar {
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
  }

  ::v-deep .van-icon-arrow-left {
    color: black;
  }
}

.list {
  .item {
    width: 312px;
    height: 92px;
    background-color: white;
    padding: 15px 20px;
    margin: 10px auto;
    color: #303133;
    font-size: 15px;

    .info {
      border-bottom: 0.5px solid #f3f3f3;

      p {
        padding-bottom: 8px;

        span {
          padding: 5px;
        }
      }
    }

    .call {
      height: 44px;
      display: flex;
      justify-content: space-between;
      padding-top: 15px;

      span {
        padding: 5px;
      }

      p:first-child {
        display: flex;
        height: 19px;

        span {
          padding: 0 8px;
        }
      }
    }
  }
}

.footer {
  height: 60px;
  width: 375px;
  position: fixed;
  bottom: 0;
  left: 0;

  button {
    background: linear-gradient(90deg, #f9211c, #ff6335);
    font-size: 14px;
    height: 40px;
    width: 335px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 25px;
    border: none;
    margin: 10px 20px;
  }
}
</style>
